<!--  -->
<template>
  <div>
     <div class="destin">
        <div class="activity_title">
            <span>{{mdd.content}}</span>
            <a href="#">更多<i class="iconfont">&#xe60c;</i></a>
        </div>
        <div class="aiji">
            <!-- {{mdd.banner[0].media_thumb}} -->
            <div class="aj_left">

                <img :src="mdd.banner[0].media_thumb" alt="">
            </div>
            <div class="aj_right">
                <div class="aj_top">
                    <img :src="mdd.banner[1].thumb" alt="">
                </div>
                <div class="aj_bottom">
                    <img :src="mdd.banner[2].thumb" alt="">
                </div>
            </div>
        </div>
        <div class="gundong" >
            <!-- {{item}} -->
            <ul>
                <li v-for="(item, index) in mdd.data" :key="index">
                    <img :src="item.thumb" alt="">
                    <span>{{item.title}}</span>
                </li>
            </ul>
        </div>
        <div class="hui"></div>
     </div>
  </div>
</template>

<script>
export default {
    props:[
        "mdd"
    ],
  data() {
    return {};
  }
};
</script>
<style scoped lang="scss">
.destin{
    width: 100%;
    height: auto;
}
.activity_title {
  width: 100%;
  height: 1.333333rem;
  line-height: 1.333333rem;
  position: relative;
  span {
    color: #333;
    font-size: 0.426666rem;
    font-weight: 1000;
    margin-left: 0.3666rem;
  }
  a {
    text-decoration: none;
    font-size: 0.346666rem;
    position: absolute;
    right: 0.2666rem;
    color: #999;
  }
}
.activity_title:before {
    content: "";
    display: inline-block;
    width: .1rem;
    height: .5rem;
    background: #fed101;
    position: relative;
    top: .1rem;
}
.hui{
    width: 100%;
    height: 0.26666rem;
    background: rgb(247, 244, 244);
}
.aiji{
    width: 100%;
    height: auto;
    display: flex;
    .aj_left{
        width: 70%;
        height: 4.2333333rem;
        margin-right: 0.1rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .aj_right{
        width: 30%;
        height: 4.1333333rem;
        .aj_top{
            width: 100%;
            height: 50%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .aj_bottom{
            width: 100%;
            height: 50%;
            margin-top: 0.1rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
.gundong{
    width: 100%;
    height: 3.25rem;
    overflow: hidden;
    overflow-x: scroll;
    ul{
        width: 26rem;
        display: flex;
        margin-top: 0.2666rem;
        margin-left: 0.16666rem;
        li{
            width: 2.66666rem;
            height:  2.66666rem;
            margin-left: 0.266666rem;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                width: 100%;
                height: 100%;
                border-radius: 0.13333rem;
            }
            span{
                width: 100%;
                font-size: 0.32rem;
                position: absolute;
                bottom: 0.1rem;
                left: 0.933333rem;
                color: #fff;
            }
        }
    }
}
</style>